﻿<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org" xmlns="">
<head>
    <meta charset="UTF-8">
    <title>首页界面</title>
    <link rel="stylesheet" href="/js/bstable/css/bootstrap.min.css">
    <link href="/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="/js/jQueryPage/src/jquery.page.css">
    <!--    <link rel="stylesheet" th:href="@{/css/base.css}" type="text/css" >-->
    <link rel="stylesheet" href="/css/base.css" type="text/css" >
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" />
    <link rel="stylesheet" href="https://iclient.supermap.io/dist/leaflet/iclient-leaflet.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
    <script type="text/javascript" src="https://iclient.supermap.io/dist/leaflet/iclient-leaflet.js"></script>

    <script  src="/js/include-leaflet.js" type=”text/javascript”></script>
    <script src="/js/include-web.js" type=”text/javascript”></script>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=hlt2uQ1EGbx5DBHvoMiXGGYFNQzZKQ95"></script>
    <script>
        $(document).ready(function() {
        function updateOnlineCount() {
            $.get("/dashboard/onlinecount", function(data) {
                $('#online-count').text(data);
            });
        }

        // 页面加载时更新在线人数
        updateOnlineCount();

        // 如果需要定时更新，在这里可以设置定时器
        setInterval(updateOnlineCount, 5000); // 每5秒更新一次
    });
    </script>
</head>
<body>
<!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>-->
<!--顶部-->
<header class="header left">
    <div class="left nav">
        <ul>
            <li class="nav_active"><i class="nav_3"></i><a th:href="@{/loc}">实时数据</a> </li>
            <li><i class="nav_2"></i><a th:href="@{/}">用户信息</a> </li>
            <li><i class="nav_3"></i><a th:href="@{/act}">帮助数据</a> </li>
        </ul>
    </div>
    <div class="header_center left">
        <h2><strong>助盲综合服务平台</strong></h2>
        <p class="color_font"><small>Comprehensive Service Platform for the Visually Impaired</small></p>
    </div>
    <div class="right nav text_right">
        <ul>
            <li><i class="nav_7"></i><a th:href="@{/logout}">退出登录</a> </li>
        </ul>
    </div>
</header>
<!--内容部分-->
<div class="con left">
    <!--选择时间-->
<!--    <div class="select_time">-->
<!--        <div class="static_top left">-->
<!--            <i></i><span>总体概况</span>-->
<!--        </div>-->
<!--    </div>-->
    <!--数据总概-->
    <div class="con_div">
        <div class="con_div_text left">
            <div class="con_div_text01 left">
                <img src="img/info_1.png" class="left text01_img">
                <div class="left text01_div">
                    <p>在线总人数(人)</p>
                    <p id="online-count" th:text="${onlinesum}">0</p>
                </div>
            </div>
            <div class="con_div_text01 right">
                <img src="img/info_2.png" class="left text01_img">
                <div class="left text01_div">
                    <p>用户总人数(人)</p>
                    <p th:text="${sum}"></p>
                </div>
            </div>
        </div>
        <div class="con_div_text left">
            <div class="con_div_text01 left">
                <img src="img/info_4.png" class="left text01_img">
                <div class="left text01_div">
                    <p>在线盲人数(人)</p>
                    <p class="sky" th:text="${onlineb}"></p>
                </div>
            </div>
            <div class="con_div_text01 right">
                <img src="img/info_5.png" class="left text01_img">
                <div class="left text01_div">
                    <p>在线志愿者数(人)</p>
                    <p class="sky" th:text="${onlinev}"></p>
                </div>
            </div>
        </div>
        <div class="con_div_text left">

            <div class="con_div_text01 left">
                <img src="img/info_6.png" class="left text01_img">
                <div class="left text01_div">
                    <p>已完成帮扶人次(次)</p>
                    <p class="org" th:text="${done}">12356</p>
                </div>
            </div>
            <div class="con_div_text01 right">
                <img src="img/info_7.png" class="left text01_img">
                <div class="left text01_div">
                    <p>等待帮助人数(人)</p>
                    <p class="org" th:text="${waiting}">12356</p>
                </div>
            </div>
        </div>
    </div>
    <!--统计分析图-->
    <div class="div_any">
        <div class="left div_any01">
            <div class="div_any_child">
                <div class="div_any_title"><img src="img/title_4.png">24h求助响应统计 </div>
                <p id="char1" class="p_chart"></p>
            </div>
            <div class="div_any_child">
                <div class="div_any_title"><img src="img/title_2.png">在线状态统计 </div>
                <p id="char2" class="p_chart"></p>
            </div>
        </div>
        <div class="div_any02 left ">
            <div class="div_any_child div_height">
                <div class="div_any_title any_title_width"><img src="img/title_3.png">在线用户展示 </div>
                <div id="map_div"></div>
            </div>
        </div>

        <div class="right div_any01">
            <div class="div_any_child">
                <div class="div_any_title"><img src="img/title_4.png">处理举报 </div>
                <div class="table_p">

                    <table>
                        <thead>
                        <tr>
                            <th class="custom-btn">活动号</th>
                            <th class="custom-btn">举报用户</th>
                            <th class="custom-btn">举报时间</th>
                            <th class="custom-btn">内容</th>
                            <th class="custom-btn"> </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="feedback : ${feedback}">
                            <td th:text="${feedback.aid}"></td>
                            <td th:text="${feedback.uid}"></td>
                            <td th:text="${feedback.time}"></td>
                            <td th:text="${feedback.content}"></td>
                            <td class="text-center">
                                <form th:action="@{/dashboard/backinfodone}" method="get">
                                    <input type="hidden" name="id" th:value="${feedback.fid}" />
                                    <button type="submit" class="btn btn-outline-danger custom-btn ">done</button>
                                </form>
                            </td>
                        </tr>
                        </tbody>

                    </table>


                </div>
            </div>


        </div>
        <div class="right div_any01">
            <div class="div_any_child">
                <div class="div_any_title"><img src="img/title_4.png">处理建议 </div>
                <div class="table_p">

                    <table>
                        <thead>
                        <tr>
                            <th class="custom-btn">用户</th>
                            <th class="custom-btn">建议时间</th>
                            <th class="custom-btn">内容</th>
                            <th class="custom-btn"></th>

                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="feedback2 : ${feedback2}">
                            <td th:text="${feedback2.uid}"></td>
                            <td th:text="${feedback2.time}"></td>
                            <td th:text="${feedback2.content}"></td>
                            <td class="text-center">
                                <form th:action="@{/dashboard/backinfodone}" method="get">
                                    <input type="hidden" name="id" th:value="${feedback2.fid}" />
                                    <button type="submit" class="btn btn-outline-danger custom-btn ">done</button>
                                </form>
                            </td>
                        </tr>

                        <!--                        <tr>-->
                        <!--                            <td colspan="8">-->
                        <!--                                <div class="pagelist">-->
                        <!--                                    <p>当前<span th:text="${presentPage}"></span>页,总<span th:text="${totalPages}"></span>页共<span th:text="${totalElements}"></span>条记录-->

                        <!--                                    </p>-->
                        <!--                                    <a class="nav_active" th:href="@{/dashboard/search2(page = (${(presentPage == 1) ? presentPage : (presentPage - 1)}),name=${name1})}" >上一页</a>-->
                        <!--                                    <a class="nav_active" th:href="@{/dashboard/search2(page = (${(presentPage != totalPages) ? (presentPage + 1) : presentPage}),name=${name1})}">下一页</a>-->
                        <!--                                    <a class="nav_active" th:href="@{/dashboard/search2(page = ${totalPages},name=${name})}">尾页</a>-->
                        <!--                                </div>-->

                        <!--                            </td>-->
                        <!--                        </tr>-->
                        </tbody>

                    </table>


                </div>
            </div>


        </div>
    </div>
</div>
<script src="/js/jquery/jQuery-2.2.0.min.js" type="text/javascript"></script>
<script src="/js/base.js" type="text/javascript"></script>
<script src="/js/echarts-all.js" type="text/javascript"></script>
<!--<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5ieMMexWmzB9jivTq6oCRX9j&callback"></script>-->
<script src="/js/jQueryPage/src/jquery.page.js" type="text/javascript"></script>
<script src="/js/map.js" type="text/javascript"></script>
<script src="/js/index.js" type="text/javascript"></script>
<script src="/js/ztree/jquery.ztree.all-3.5.js" type="text/javascript"></script>
<script src="/js/listTree.js" type="text/javascript"></script>
</body>
</html>
